<template>
<div style="width: 100%;border-bottom: 1px solid #ccc;">
    <div style="width: 100%;height: 120px;" id="barechart"></div>
    <div class="cu-bar">
        <div class="iconfont el-icon-top text-top"></div>
        <div class="text-red">{{ this.l_num }}</div>
        <div class="bar-box">
            <div class="cu-red" :style="{width:l_per+'%'}"></div>
            <div class="cu-gray"></div>
            <div class="cu-blue" :style="{width:r_per+'%'}"></div>
        </div>
        <div>{{this.r_num}}</div>
        <div class="iconfont el-icon-bottom text-bottom"></div>
    </div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default{
    props:{
        chardData:{
            type:Array,
            default: ()=>[],
        }
    },
    data () {
        return {
            myChart:"",
            l_num:0,
            r_num:0
        };
    },
    computed:{
        l_per(){
            return this.l_num/this.chardData.length*100
        },
        r_per(){
            return this.r_num/this.chardData.length*100
        }
    },
    watch:{
        chardData(newval,oldval){
            console.log("newval",newval)
            this.initCharts()
        }
    },
    methods: {
    initCharts () {
        this.l_num = 0;
        this.r_num = 0;
        // 根据数据分颜色
        let data = [...this.chardData];
        // a,b,c,d,e,f,g,h,i
        const xAxios = ['≥10','10~5','5~2','2~0','0','-2~0','-5~-2','-10~-5','≤-10'];
        // 根据xAxios的值分割数据
        let dataMap = {
            a:[],
            b:[],
            c:[],
            d:[],
            e:[],
            f:[],
            g:[],
            h:[],
            i:[]
        };
        data.forEach(item => {
            if(item <= -10){
                dataMap['i'] = [...dataMap['i'],item]
                this.r_num++
            }
            if(item <= -5 && item > -10){
                dataMap['h'] = [...dataMap['h'],item]
                this.r_num++
            }
            if(item <= -2 && item > -5){
                dataMap['g'] = [...dataMap['g'],item]
                this.r_num++
            }
            if(item < 0 && item > -2){
                dataMap['f'] = [...dataMap['f'],item]
                this.r_num++
            }
            if(item == 0){
                dataMap['e'] = [...dataMap['e'],item]
            }
            if(item <= 2 && item > 0){
                dataMap['d'] = [...dataMap['d'],item]
                this.l_num++
            }
            if(item <= 5 && item > 2){
                dataMap['c'] = [...dataMap['c'],item]
                this.l_num++
            }
            if(item <= 10 && item > 5){
                dataMap['b'] = [...dataMap['b'],item]
                this.l_num++
            }
            if(item > 10){
                dataMap['a'] = [...dataMap['a'],item]
                this.l_num++
            }
        })

        let data_ = data.length?[dataMap['a'].length,dataMap['b'].length,dataMap['c'].length,dataMap['d'].length,dataMap['e'].length,dataMap['f'].length,dataMap['g'].length,dataMap['h'].length,dataMap['i'].length]:[]
        // 数据映射
        var chartDom = document.getElementById('barechart');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            grid:{
                top:20,
                left:10,
                right:10,
                bottom:15
            },
            xAxis: {
                type: 'category',
                data: xAxios,
                axisTick:false,
                axisLine:{
                    show:false
                },
                axisLabel:{
                    color:'#666',
                    fontSize:8,
                    // rotate:45
                }
            },
            yAxis: {
                type: 'value',
                show:false
            },
            series: [
                {
                data: data_,
                type: 'bar',
                label:{
                    show:true,
                    position: 'top',
                    color:"inherit"
                },
                barWidth:20,
                itemStyle:{
                        color:({dataIndex})=>{
                            if(dataIndex <= 3){
                                return "#F03A55";
                            }else if(dataIndex >= 5){
                                return "#00A870";
                            }else{
                                return "#B2B8BE";
                            }
                        }
                    }
                }
            ]
            };

        option && myChart.setOption(option);
    }
    },
    mounted () {
    this.initCharts();
    window.onresize = function() {
        this.myChart.resize();
    };
    }
}
</script>
<style lang="less" scoped>
.cu-bar{
    display: flex;
    align-items: center;
    margin: 10px auto;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 10px;
    .text-top{
        font-size: 20px;
        color: #F03A55;;
    }
    .text-bottom{
        font-size: 20px;
        color: #00A870;;
    }
    .bar-box{
        flex-shrink: 0;
        width: 340px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 20px;
        .cu-red{
            background: #F03A55;
            height: 12px;
            flex-shrink: 0;
            border-radius: 10px 0 0 10px;
            position: relative;
        }
        .cu-red::after{
            content:"";
            width: 12px;
            height: 12px;
            background: #F03A55;
            transform: translateX(50%) skew(45deg);
            position: absolute;
            right: 0;
            top: 0;
        }
        .cu-gray{
            background: #B2B8BE;
            height: 12px;
            flex:1;
            border-radius: 0;
            margin: 0 20px;
            position: relative;
        }
        .cu-gray::before{
            content:"";
            width: 12px;
            height: 12px;
            background: #B2B8BE;
            transform: translateX(-50%) skew(45deg);
            position: absolute;
            left: 0;
            top: 0;
        }
        .cu-gray::after{
            content:"";
            width: 12px;
            height: 12px;
            background: #B2B8BE;
            transform: translateX(50%) skew(45deg);
            position: absolute;
            right: 0;
            top: 0;
        }
        .cu-blue{
            background: #00A870;
            height: 12px;
            flex-shrink: 0;
            border-radius: 0 10px 10px 0;
            position: relative;
        }
        .cu-blue::before{
            content:"";
            width: 12px;
            height: 12px;
            background: #00A870;
            transform: translateX(-50%) skew(45deg);
            position: absolute;
            left: 0;
            top: 0;
        }
    }
}

.text-red{
    color: #F03A55;
    font-size: 18px;
}
.text-blue{
    color: #F03A55;
    font-size: 18px;
}

</style>
